<template>
    <div v-loading="loading">
    <template v-if="packageList && packageList.length > 0">
        <el-row :gutter="20" v-for="(infos,indexs) in packageList" :key="indexs">
            <el-col :span="8" v-for="(info,innerindex) in infos" :key="innerindex">
                <el-card class="box-card">
                    <div class="packagebox">
                    <div class="pktitle">{{info.name}}</div>
                    <div class="pkinfo">
                        <div>来源企业：{{corpPartnerKeyValue[info.corppartnerid] != undefined ? corpPartnerKeyValue[info.corppartnerid] : '-' }}</div>
                        <div>内容包ID：{{info.packageid}}</div>
                        <div>写入媒资：{{info.mediacount}}</div>
                    </div>
                    <div class="btn-control"><el-button  type="primary" class="btn-nr" @click="handleContent(info.packageid)">写入内容管理</el-button></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </template>
    <template v-else-if="packageList && packageList.length == 0 && !loading">
        <el-empty description="暂无内容包，快快联系合作企业进行写入权限的授权吧！"></el-empty>
    </template>
    </div>
</template>

<script>
    import {ref} from 'vue'
    import {useStore} from 'vuex'
    import { useRouter } from 'vue-router'
    import { getCorpPartner, getPartnerRelWritepackages, getPartnerRelWritepackagesStatistics } from "@/api/corppartner/index"
    export default {
        name: "",
        components: {},
        setup() {
            const store = useStore()
            const router = useRouter()
            const corpid = store.getters.corpinfo.corpid
            const loading = ref(true)
            const packageList = ref([])
            const corpPartnerKeyValue = ref({})

            const getPackageList = () => {
                getPartnerRelWritepackages().then( response => {
                    loading.value = false
                    // console.log(response)
                    if( response.errcode == 0 && response.data.list.length > 0 ){
                        response.data.list.forEach((value,index) => {
                            const pindex = Math.floor(index/3)
                            if( !packageList.value[pindex] ){
                                packageList.value[pindex] = []
                            }
                            packageList.value[pindex].push(value)
                        });
                        getPackageMediaStatistics()
                        // console.log(packageList)
                    }else{
                        console.log(response)
                    }
                })
            }
            const getPackageMediaStatistics = () => {
                if( packageList.value && packageList.value.length > 0 ){
                    packageList.value.forEach(function( packageRowData ){
                        if( packageRowData.length && packageRowData.length > 0 ){
                            packageRowData.forEach(function( packageInfo ){
                                getPartnerRelWritepackagesStatistics( {packageid: packageInfo.packageid, corpid: corpid} ).then(response => {
                                    if( response.errcode == 0 ){
                                        packageInfo.mediacount = response.data.mediacount
                                    }else{
                                        console.log(response)
                                    }
                                })
                            })
                        }
                    })
                }
            }
            const getPartnerList = () => {
                getCorpPartner({corpid:corpid,partnertype:0}).then(response => {
                    if( response.errcode == 0 && response.data.list != undefined && response.data.list.length > 0 ){
                        response.data.list.forEach(function(value){
                            corpPartnerKeyValue.value[value.corpid] = value.corpname
                        })
                        
                        // console.log(response.data.list)
                    }else{
                        console.log(response)
                    }
                })
            }
            const handleContent = (packageid) => {
                router.push({name:'packagecontentwrite',query: {packageid:packageid}})
            }

            const init  = () => {
                getPackageList()
                getPartnerList()
            }
            return {
                loading,
                packageList,
                corpPartnerKeyValue,
                handleContent,
                init
            }
        }
    }
</script>

<style scoped  lang="scss">
   /* el-row-start */
    .el-button__text--expand{letter-spacing: 0;margin-right: 0;}
    .nrtitle{font-size:20px;font-weight: 600;}
    .el-row {
        margin-bottom: 20px;
        // padding-right: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        position: relative;
        border-radius: 4px;
    }
    .bg-purple-dark {
    background: #99a9bf;
    }
    .bg-purple {
    background: #d3dce6;
    }
    .bg-purple-light {
    background: #e5e9f2;
    }
    .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
    }
    /* el-row-end */
    .self-flex-align--center {
        display: flex;
        align-items: center;
    }
    .box-card{
        .el-row{
            margin-bottom:0;
            span{
                .el-button{color:#333 !important;font-size: 14px !important;}
            }
        }
    }
    .packagebox{
        margin: auto;
        width:80%;
        .pktitle{
            font-size: 18px;
            color:#333;
            font-weight: 600;
        }
        .pkinfo{
            margin:15px auto 30px;
            font-size: 14px;
            color:#666;
            >div{
                margin-top: 10px;
            }
            >div:first-child{margin-top: 0;}
        }
        .btn-control{
            text-align: center;
            .btn-nr{
                margin:0 auto 16px;
                width:60%;
            }
        }

    }
</style>